
<template>
  <div>
    <div class="pb-3" v-for="(item,i) in dataList" :key="i">
      <div class="audit-section">
        <div class="audit-section-header d-flex ">
          <div class="d-flex align-items-center ">
            <van-tag round color="#1DA1FF" size="large">{{item.tasks.length}}</van-tag>
            <span class="ml-1">待审核</span>
          </div>
          <div class="ml-auto d-flex">
            <div class="d-flex align-items-center mr-2">
              <img class="small-avatar mr-2" :src="item.studentAvatar | avatarUrl" />
              <span>{{item.studentName}}</span>
            </div>
            <div class="d-flex align-items-center">
              <img class="small-avatar mr-2" :src="item.teacherAvatar | avatarUrl" />
              <span>{{item.teacherName}}</span>
            </div>
          </div>
        </div>
        <div class="audit-section-body ">
          <div v-for="(task,j) in item.tasks" :key="j" class="audit-tasklist" @click="onClick(task)">
            <div class="text-truncate" style="width:100%">{{task.title}}</div>
            <div class="font-color-light font-small">{{task.content.one}}/{{task.content.two}}/{{task.content.three}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Getter, Action } from 'vuex-class'

@Component
export default class AuditAdmin extends Vue {
  @Action getAuditAdmin;
  @Action goToTaskContent;
  public async onShow () {}

  public get dataList () {
    if (!this.$store.state.admin.audits) {
      return null
    }
    this.$store.state.admin.audits.items.sort(function (a, b) { return b.tasks.length - a.tasks.length })
    return this.$store.state.admin.audits.items
  }
  public async created () {
    if (this.dataList === null) {
      await this.getAuditAdmin()
    }
  }
  public onClick (item) {
    this.goToTaskContent(item)
  }
}
</script>

<style lang="stylus" scoped>
.audit-section {
  background-color: #ffffff;
  border-radius: 8px;
  margin: 0 10px;
  box-shadow: 2px 1px 6px 1px rgba(0.1, 0.1, 0.1, 0.1);

  .audit-section-header {
    height: 50px;
    background: #f7f7f7;
    border-radius: 8px;
    padding: 0 10px;
  }

  .audit-section-body {
    min-height: 30px;

    .audit-tasklist {
      padding: 10px 0;
      margin :0 10px;
      border-bottom: 1px solid #f7f7f7;
    }

    .audit-tasklist:last-child {
      border-bottom: none;
    }
  }
}
</style>
